<template>
<div class="header">
<h1>订单管理</h1>

<div class="her">
<img src="@/assets/logo.png" alt="">
<p>账号:{{}}</p></div>

</div>

<main>
 <div class="left">

  <el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="主页" name="1">
    
  </el-collapse-item>
  <el-collapse-item title="前台首页" name="2">
  </el-collapse-item>
  <el-collapse-item title="用户管理" name="3">
    <router-link :to="{name : 'HomeCart'}">用户列表</router-link>
  </el-collapse-item>
  <el-collapse-item title="商品" name="4">
    <div><router-link :to="{name : 'HomeShopin'}">商品管理</router-link></div>
    <div><router-link :to="{name : 'HomeLogin'}">商品分类管理</router-link></div>
    <div>商品列表</div>
    <div><router-link :to="{name : 'HomeLunbo'}">轮播图管理</router-link></div>
    <div><router-link :to="{name : 'HomeDan'}">订单管理</router-link></div>
  </el-collapse-item>
  <el-collapse-item title="营收管理" name="5">
  </el-collapse-item>
  <el-collapse-item title="文件管理" name="6">
  </el-collapse-item>
</el-collapse>



  </div>

  <div class="right">
    
    <div class="r1">
    <el-select v-model="value" placeholder="请选择订单类型">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>

  <el-input placeholder="请输入内容" v-model="input" clearable>
</el-input>

<el-button color="orange">重置</el-button>
<el-button color="rgb(58, 162, 231)">搜索</el-button>

  </div>
  
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" >
    </el-table-column>
    <el-table-column prop="numberid" label="订单编号" width="180">
    </el-table-column>
    <el-table-column prop="price" label="总价">
    </el-table-column>
    <el-table-column prop="xi" label="下单人ID">
    </el-table-column>
    <el-table-column prop="name" label="联系人">
    </el-table-column>
    <el-table-column prop="phone" label="联系电话">
    </el-table-column>
    <el-table-column prop="address" label="送货地址">
    </el-table-column>
    <el-table-column prop="state" label="状态">
    </el-table-column>
    <el-table-column prop="date" label="下单时间">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      
        <el-button  @click="open" type="text" size="small">详情</el-button><br>
        <el-button type="text" size="small">发货</el-button>
      
    </el-table-column>
  </el-table>

  <div class="block">
    <p>共2条</p>
  <el-pagination layout="prev, pager, next" :total="20">
  </el-pagination>
</div>


  </div>
</main>


</template>



<script>

  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '服装'
        }, {
          value: '选项2',
          label: '书籍'
        }, {
          value: '选项3',
          label: '生活用品'
        }, {
          value: '选项4',
          label: '食品'
        }, {
          value: '选项5',
          label: '数码用品'
        }],
        tableData: [{
            id: 24,
            numberid: 20230805014642654151,
            price : 116,
            xi : 2,
            phone: 158888888,
          date: '2023-08-05 01:26:42',
          name: '王小虎',
          address: '北京市',
          state : '已支付'
        }, {
          id: 9,
            numberid: 20230331223822860904,
            price : 367.65,
            xi : 2,
            phone: 158888888,
          date: '2023-08-05 01:26:42',
          name: '王小虎',
          address: '新疆',
          state : '未支付'
        }],
        value: '',
        input: '',
      }
    },
    methods:{
         open(){
          this.$alert(this.tableData.slice(0,1), '商品', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
         }
    }
  }
</script>




<style>

.block{
    margin: 10px;
    display: flex;
    flex-direction: row;
}
.el-select {
    width: 200px;
    margin: 5px;
}
.el-input{
    margin: 5px;
    width: 200px;
}










.header{
  width: 100%;
  height: 100px;
  background-color: #2a2a33;
  color: yellow;
  display: flex;
  flex-direction: row;
  
}
.header img{
  width: 50px;
  height: 50px;
}
.her{
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: row;
}
main{
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.left{
  width: 200px;
  height: 520px;
  background-color: #2a2a33;
  display: flex;
  flex-direction: column;
}
.right{
  width: 100%;
  overflow: hidden;
}

.ga{
  display: flex;
  flex-direction: column;
}
.ga a{
  margin: 5px;
    color: white;
  text-decoration: none;
}

.one{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.one img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.one a{
  color: white;
  text-decoration: none;
}

.two{
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.two img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.two a{
  color: white;
  text-decoration: none;
}

.three{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.three img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.three a{
  color: white;
  margin: 5px;
  text-decoration: none;
}
.te{
  display: flex;
  flex-direction: column;
}

.four{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.four img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.four a{
  color: white;
  text-decoration: none;
}

.five{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.five img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.five a{
  color: white;
  text-decoration: none;
}

.six{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.six img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.six a{
  color: white;
  text-decoration: none;
}




</style>